import QtQuick
import QtQuick.Controls

Item {
    id: root
    property string placeholderText: qsTr("Input Text Here")     // 输入框提示文本
    property int inputBorderWidth: 1                 // 输入框边框宽度
    property int inputBorderRadius: 7           // 输入框圆角半径
    property int textLeftMargin: 10            // 输入框文字距左侧距离
    width: 500
    height: 50
    property int inputFontSize: height / 2     // 输入框字体大小
    // 信号
    signal enterPressed
    signal tabPressed


    Rectangle {
        id: inputRec
        anchors.fill: parent
        color: "#242424"
        border.width: root.inputBorderWidth
        border.color: "gray"
        radius: root.inputBorderRadius

        // 输入框
        TextInput {
            id: pathInput
            anchors.fill: parent
            anchors.leftMargin: root.textLeftMargin
            verticalAlignment: TextInput.AlignVCenter

            // 输入框文字颜色
            color: "#cccccc"
            font.pixelSize: root.inputFontSize

            // 提示文本
            PlaceholderText {
                id: placeholderText
                anchors.centerIn: parent
                anchors.fill: parent
                verticalAlignment: TextInput.AlignVCenter
                text: root.placeholderText
                color: "#777777"
                font.pixelSize: root.inputFontSize
            }

            // 输入框激活/失去焦点执行相关操作
            onActiveFocusChanged: {
                if (pathInput.activeFocus) {
                    inputRec.border.color = "#0078d4";
                    placeholderText.visible = false;
                } else {
                    inputRec.border.color = "gray";
                    placeholderText.visible = true;
                }
            }

            // 按键信号
            Keys.onPressed: (event) => {
                if (event.key === Qt.Key_Return) {
                    root.enterPressed();
                }
                else if (event.key === Qt.Key_Tab) {
                    root.tabPressed();
                }
            }
        }
    }
}
